<template>
	<view class="seach">
		<view class="seact-content">
			<view class="seach-top">
				<view class="seach-input">
					<input v-model="keyword" @confirm="seach" type="text" value="" placeholder="请输入要搜索的内容"/>
					<view class="seach-btn" @click="seach(1)">
						<text>搜索</text>
					</view>
				</view>
			</view>
			<view class="short-tabs" v-if="isShow">
				<scroll-view scroll-x="true" class="scrollView" :scroll-into-view="tabScrollInto">
					<view class="short-tab" v-for="(item,index) in shortTabs" :key="index"
						:class="active===item.id?'active':''" :id="'item_'+item.id" @click="handleTab(item.id)">
						<view class="short-tab-item">
							<text>{{item.name}}</text>
							<text>{{item.label}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="goods-lists" v-if="isShow">
			<block-goods :list="list" :active="active"></block-goods>
			<block-loading :status="status" :len="list.length"></block-loading>
		</view>
		<view class="history" v-if="!isShow && history.length">
			<view class="title">
				<text>历史记录</text>
				<text class="iconfont icon-close" @click="close()"></text>
			</view>
			<view class="history-lists">
				<text class="history-list fex1" v-for="(item,index) of history" 
				:key="index" @click="handleSeach(item)">
					{{item}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import BlockGoods from "@/components/BlockGoods/BlockGoods.vue"
	import {seachGoods} from "@/api/duomai.js"
	export default{
		name:"seach",
		components: {
			BlockGoods
		},
		data(){
			return{
				isShow:false,
				active: 1,
				tabScrollInto: "",
				shortTabs: [{
						id: 1,
						name: "淘客",
						label: "猜你喜欢"
					},
					{
						id: 2,
						name: "京东",
						label: "品牌好货"
					},
					{
						id: 5,
						name: "唯品会",
						label: "每日大牌"
					},
					{
						id: 6,
						name: "苏宁易购",
						label: "大牌电器"
					},
					// {
					// 	id: 3,
					// 	name: "拼多多",
					// 	label: "今日爆款"
					// },
					{
						id: 4,
						name: "考拉",
						label: "正品尖货"
					}
				],
				//搜索
				keyword:"",
				list:[],
				status: "loading",
				page: 1,
				//历史数据
				history:[]
			}
		},
		onLoad() {
			let seach_history = uni.getStorageSync('seach_history');
			if(seach_history){
				this.history = JSON.parse(seach_history)
			}
		},
		//上拉加载
		onReachBottom(){
			this.seach()
		},
		methods:{
			//顶部导航
			handleTab(id) {
				if (this.active === id) return;
				this.active = id;
				this.page=1;
				this.list = [];
				this.status = "loading";
				this.tabScrollInto = 'item_' + id;
				this.seach();
			},
			handleSeach(item){
				this.keyword = item;
				this.seach();
			},
			async seach(val){
				if(!this.keyword){
					this.$msg("请输入要搜索的内容")
					return
				}
				if(val){
					this.page=1;
					this.list = [];
					this.status = "loading";
				}
				this.isShow = true;
				let data = {
					page: this.page,
					page_size: 20,
					custom_type: this.active,
					query:this.keyword
				};
				let res = await seachGoods(data);
				if (res.code === 1) {
					let listData = res.data.data;
					if (this.page === 1 && listData.length === 0) {
						this.status = "nodata"
						return
					}
					if(this.page===1&&listData.length > 0 && listData.length < 20){
						this.status = "nomore"
					}
					if (listData.length === 0) {
						this.status = "nomore"
						return;
					}
					this.page++;
					this.list = this.list.concat(listData);
				}else{
					this.status = "nodata"
				}
				this.addHistory();
			},
			addHistory(){
				let arr = this.history.filter(item=>{return item === this.keyword})
				if(!arr.length){
					this.history.unshift(this.keyword);
					uni.setStorageSync("seach_history",JSON.stringify(this.history))
				}
			},
			close(){
				this.history = [];
				uni.setStorageSync("seach_history",JSON.stringify(this.history))
			}
		},
		watch:{
			keyword(newVal){
				if(!newVal){
					this.isShow = false
				}
			}
		}
	}
</script>

<style lang="less" scoped src="./seach.less">
</style>
